<template>
	<div class="padding20">
		<div class="margin-bottom20">{{type==1?'店铺初审':'店铺终审'}}</div>
		<el-form :model="query">
			<div class="row-me">
				<el-form-item>
					<el-input class="width300 margin-right20" v-model="query.name" placeholder="请输入店铺名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select class="width300 margin-right20" v-model="query.status" placeholder="选择状态" clearable>
						<el-option label="待审核" :value="0"></el-option>
						<el-option label="已通过" :value="1"></el-option>
						<el-option label="已拒绝" :value="2"></el-option>
						<el-option label="初审通过" :value="3"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜素</el-button>
					<el-button @click="handleReset">重置</el-button>
				</el-form-item>
			</div>
		</el-form>
		<el-table :data="tableData" border header-cell-class-name="table-header-style">
			<el-table-column label="店铺logo" align="center">
				<template slot-scope="scope">
					<el-image :src="scope.row.logo" class="width100" :preview-src-list="[scope.row.logo]"></el-image>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="店铺名称" align="center"></el-table-column>
			<el-table-column prop="location" label="位置" align="center"></el-table-column>
			<el-table-column prop="mobile" label="电话" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="{row}">
					<span>{{row.status==1?'已通过':row.status==2?'已拒绝':row.status==0?'待审核':row.status==3?'初审通过':''}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="200">
				<template slot-scope="scope">
					<el-button type="text" @click=" handleDetail(scope.row,1)">详情</el-button>
					<el-button type="text" @click="handleDetail(scope.row)"
						v-if="(scope.row.status==0&&type==1)||(scope.row.status==3&&type==2)">去审核</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background @current-change="handleCurrentChange" :current-page.sync="query.pageNumber"
				layout="->,total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
		<!-- 审核详情 -->
		<el-dialog title="审核详情" :visible.sync="storeVisible" width="60%" top="5vh" :destroy-on-close="true">
			<el-form :model="form" label-width="100px">
				<el-form-item label="店铺logo:" prop="logo">
					<el-image :src="form.logo" class="width100 height100"></el-image>
				</el-form-item>
				<el-form-item label="背景图:" prop="images">
					<el-image :src="form.images" class="width100 height100"></el-image>
				</el-form-item>
				<el-form-item label="店铺名称:" prop="name">
					<span>{{form.name}}</span>
				</el-form-item>
				<el-form-item label="店铺分类:" prop="categoryId">
					<span>{{form.categoryName}}</span>
				</el-form-item>
				<el-form-item label="位置:" prop="location">
					<span>{{form.location}}</span>
				</el-form-item>
				<el-form-item label="电话:" prop="mobile">
					<span>{{form.mobile}}</span>
				</el-form-item>
				<el-form-item label="店铺详情:" prop="detail">
					<div v-html="form.detail"></div>
				</el-form-item>
				<el-form-item label="审核结果:" prop="detail" v-if="!isDetail&&type==1">
					<el-radio v-model="form.status2" :label="3">通过</el-radio>
					<el-radio v-model="form.status2" :label="2">拒绝</el-radio>
				</el-form-item>
				<el-form-item label="审核结果:" prop="detail" v-if="!isDetail&&type==2">
					<el-radio v-model="form.status2" :label="1">通过</el-radio>
					<el-radio v-model="form.status2" :label="2">拒绝</el-radio>
				</el-form-item>
				<el-form-item label="拒绝原因:" prop="detail" v-if="!isDetail&&form.status2==2">
					<el-input type="textarea" v-model="form.content" rows="6" placeholder="请输入拒绝原因">
					</el-input>
				</el-form-item>
				<el-form-item label="审核结果:" prop="detail" v-if="isDetail">
					<span>{{form.status==1?'通过':form.status==2?'拒绝':form.status==0?'待审核':form.status==-1?'待提交':''}}</span>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="submitForm" v-if="!isDetail">
						确 认
					</el-button>
					<el-button type="primary" v-if="isDetail" @click="storeVisible=false">
						关 闭
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		props: ['type'],
		data() {
			return {
				query: {
					status: null,
					pageNumber: 1,
					pageSize: 10
				},
				tableData: [],
				total: 0,
				storeVisible: false,
				isDetail: false,
				form: {}
			}
		},
		mounted() {
			if (this.type == 1) {
				this.query.status = 0
			} else {
				this.query.status = 3
			}
			this.getData()
		},
		methods: {
			async submitForm() {
				if (this.$.isEmpty(this.form.status2)) {
					this.$message.warning('请选择审核结果!')
					return
				}
				this.form.status = this.form.status2
				const res = await this.$post('/shopSave', this.form)
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
					this.storeVisible = false
				}
			},
			//搜索
			handleSearch() {
				this.query.pageNumber = 1
				this.getData()
			},
			//重置
			handleReset() {
				this.query = {
					pageNumber: 1,
					pageSize: 10
				}
				if (this.type == 1) {
					this.query.status = 0
				} else {
					this.query.status = 3
				}
				this.getData()
			},
			//页数改变
			handleCurrentChange(pageNumber) {
				this.query.pageNumber = pageNumber
				this.getData()
			},
			async getData() {
				const res = await this.$get('/shopShow', this.query)
				this.tableData = res.data.list
				this.total = res.data.totalRow
			},
			handleDetail(row, type = 0) {
				if (type) {
					this.isDetail = true
				} else {
					this.isDetail = false
				}
				this.form = JSON.parse(JSON.stringify(row))
				this.storeVisible = true
			}
		}
	}
</script>

<style>
</style>
